<template>
  <!-- 歌手歌曲 -->
  <div class="ard-as">
    <div class="mod-songlist-toolbar">
      <a class="mod-btn-blue">
        <span class="btn-play" @click="playAll">
          <i class="iconfont">&#xe8a8;</i>
          全部播放
        </span>
        <span class="btn-add">
          <i class="iconfont" @click="addAll">&#xe603;</i>
        </span>
      </a>
      <a class="mod-btn" @click="clickCol">
        <i class="iconfont">&#xe8c8;</i>
        收藏热门({{ songs.length }})
      </a>
    </div>
    <art-song-list :songs="songs" :showAlbum="true"></art-song-list>
  </div>
</template>

<script>
import ArtSongList from "components/songlist/ArtSongList.vue";
export default {
  components: {
    ArtSongList,
  },
  data() {
    return {
      songs: [],
      id: "",
    };
  },
  mounted() {
    this.id = this.$route.query.id;

    this.getArtistSongs();
  },
  methods: {
    clickCol() {
      console.log("iu");
      if (this.$store.state.isLogin) {
        var newItem = [];
        this.songs.forEach((item) => {
          newItem[newItem.length] = item.id;
        });
        let ids = newItem.join(",");
        this.$store.commit("changeShowCollect", true);
        this.$store.commit("changeSId", ids);
      } else {
        alert("请登录后再收藏");
      }
    },
    playAll() {
      var newItem = [];
      this.songs.forEach((item) => {
        newItem[newItem.length] = {
          id: item.id,
          name: item.name,
          ar: item.ar,
          al: item.al,
          mv: item.mv,
          dt: item.dt,
          fee: item.fee,
        };
      });
      this.playSongs(newItem, true);
    },
    addAll() {
      var newItem = [];
      this.songs.forEach((item) => {
        newItem[newItem.length] = {
          id: item.id,
          name: item.name,
          ar: item.ar,
          al: item.al,
          mv: item.mv,
          dt: item.dt,
          fee: item.fee,
        };
      });
      console.log(newItem);
      this.addSongs(newItem, true);
    },
    getArtistSongs() {
      this.axios({
        /* 歌手歌曲接口 */
        url: "/artists?id=" + this.id,
      })
        .then((res) => {
          this.songs = res.data.hotSongs;
          console.log(this.songs);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.btn-add::before {
  content: "";
  width: 0;
  height: 100%;
  border-left: 1px solid #ccc;
  margin: 0 10px;
}
.ard-as .mod-songlist-toolbar {
  padding: 10px;
}
</style>